<template>

	<view>
		<custom-navigation-bar title="旧物回收"></custom-navigation-bar>
		<view class="main">
			<view class="form-item">
				<view class="form-item-1" style="margin-top: 20rpx;">
					<view class="form-item-lable">
						方式
					</view>
					<view class="form-item-countent">
						<radio-group style="margin-top: 20rpx;" @change="radioChange">
							<radio value="1" class="custom-radio" checked />上门取货
							<radio value="2" class="custom-radio" />送至门店
						</radio-group>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
				<view class="form-item-1">
					<view class="form-item-lable">
						分类
					</view>
					<view class="form-item-countent">
						<picker @change="typeChange" :range="typeArray">
							<input type="text" class="form-item-input" style="margin-top: 25rpx;" v-bind:value="type"
								placeholder="请选择类型" />
						</picker>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
				<view class="form-item-1" style="border: none;">
					<view
						style="width: 100%;height: 50rpx;line-height: 50rpx;float: left;text-align: center;margin-top: 20rpx;">
						今日指导价</view>
					<view
						style="margin-bottom: 80rpx;width: 100%;font-size: 28rpx;line-height: 40rpx;border: 2rpx solid #666666;float: left;margin-top: 20rpx;border-radius: 30rpx;">
						<view style="width: 50%;float: left;margin-top: 10rpx;color: #666666;"
							v-for="(item, index) in zhidaoJia" :key="index">
							<view style="width: 50%;float: left;line-height: 50rpx;text-align:right;">{{item.name}}：
							</view>
							<view style="width: 50%;float: left;line-height: 50rpx;">{{item.price}}元</view>
						</view>
						<view style="width: 100%;float: left;height: 10rpx;"></view>
					</view>
				</view>
			</view>
			<view v-if="peiSong==1">
				<view class="form-item" style="margin-top: -40rpx;">
					<view class="form-item-1">
						<view class="form-item-lable">
							估重
						</view>
						<view class="form-item-countent">
							<input type="text" class="form-item-input" placeholder="请输入估重" />
						</view>
						<view class="form-item-right">
							<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-1">
						<view class="form-item-lable">
							上门日期
						</view>
						<view class="form-item-countent">
							<picker mode="date" :value="date" @change="bindDateChange">
								<input type="text" class="form-item-input" style="margin-top: 25rpx;" v-model="date"
									placeholder="请选择上门时间" />
							</picker>
						</view>
						<view class="form-item-right">
							<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-1">
						<view class="form-item-lable">
							上门时间
						</view>
						<view class="form-item-countent">
							<picker mode="time" :value="startTime" @change="bindStratTimeChange">
								<input type="text" class="form-item-input"
									style="text-align: center;margin-top: 25rpx;width: 30%;float: left;"
									v-model="startTime" placeholder="开始时间" />
							</picker>
							<view style="width: 20%;float: left;height: 90rpx;line-height: 90rpx;text-align: center;">至
							</view>
							<picker mode="time" :value="endTime" @change="bindEndTimeChange">
								<input type="text" class="form-item-input"
									style="text-align: center;margin-top: 25rpx;width: 30%;float: left;"
									v-model="endTime" placeholder="结束时间" />
							</picker>
						</view>
						<view class="form-item-right">
							<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-1">
						<view class="form-item-lable">
							配送地址
						</view>
						<view class="form-item-countent">
							<input type="text" @click="address" v-model="addressStr" class="form-item-input"
								placeholder="请选择配送地址" />
						</view>
						<view class="form-item-right">
							<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-textarea">
						<view class="form-item-lable">
							备注信息
						</view>
						<view class="form-item-countent">
							<textarea class="form-item-textarea-textarea" placeholder="请输入备注信息"></textarea>
						</view>
					</view>
				</view>

				<view class="form-item">
					<view class="form-item-1"
						style="border: none;margin-top: 10rpx;margin-bottom: 40rpx;margin-top: 40rpx;">
						<view class="btn">确定</view>
					</view>
				</view>
			</view>

			<view v-if="peiSong==2">
				<view class="form-item" style="margin-top: -40rpx;">
					<view class="form-item-1">
						<view class="form-item-lable">
							联系人
						</view>
						<view class="form-item-countent">
							<text type="text"
								style="height: 90rpx;line-height: 90rpx;float: left;margin-left: 10rpx;">{{mendian.name}}</text>
						</view>
						<view class="form-item-right">
							<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-1">
						<view class="form-item-lable">
							联系电话
						</view>
						<view class="form-item-countent">
							<text type="text"
								style="height: 90rpx;line-height: 90rpx;float: left;margin-left: 10rpx;">{{mendian.phone}}</text>
						</view>
						<view class="form-item-right">
							<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-1" style="border: none;">
						<view class="form-item-lable">
							地址
						</view>
						<view class="form-item-countent"
							style="line-height: 50rpx;float: left;margin-left: 10rpx;height: auto;">
							{{mendian.address}}
						</view>
						<view style="width: 100%;float: left;height: 2rpx;"></view>
					</view>

				</view>
<!-- 				<view class="form-item">
					<view class="form-item-1" style="border: none;" @click="goMap()">
						<map style="width: 100%; height: 200px;float: left;" :latitude="mendian.latitude"
							:longitude="mendian.longitude">
						</map>
						<view style="width: 100%;height: 50rpx;float: left;"></view>
					</view>
				</view> -->
				<choose_map :longitude="longitude" :latitude="latitude" @position="positionChange"></choose_map>
			</view>
			<view class="form-item" style="margin-top: -30rpx;">
				<view class="form-item-1" style="border: none;">
					<view style="width: 100%;height: 50rpx;line-height: 50rpx;float: left;text-align: center;">说明</view>
					<view
						style="padding: 10rpx;margin-bottom: 80rpx;line-height: 50rpx; width: 100%;font-size: 28rpx;line-height: 40rpx;border: 2rpx solid #666666;float: left;border-radius: 30rpx;margin-top: 20rpx;">
						{{shuoming}}
						<view style="width: 100%;float: left;height: 40rpx;"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import CustomNavigationBar from '@/components/CustomNavigationBar.vue'
	import http from '../../utils/http';
import { onMounted } from 'vue';
	components: {
		CustomNavigationBar
	};
	const typeArray = ref(['旧衣回收'])
	const type = ref('')

	function typeChange(e) {
		type.value = typeArray.value[e.detail.value]
	}
	const zhidaoJia = ref([{
		name: '衬衫',
		price: 0.5
	}, {
		name: '褂头',
		price: 0.5
	}, {
		name: '裤衩子',
		price: 0.2
	}]);

	const date = ref('');

	function bindDateChange(e) {
		console.log(e.detail.value)
		date.value = e.detail.value;
	}
	const startTime = ref('');

	function bindStratTimeChange(e) {
		console.log(e.detail.value)
		startTime.value = e.detail.value;
	}
	const endTime = ref('');

	function bindEndTimeChange(e) {
		console.log(e.detail.value)
		endTime.value = e.detail.value;
	}
	const addressStr = ref('')

	function address() {
		uni.navigateTo({
			url: "/pages/address/address"
		})
	}

	function setAddress(item) {
		console.log(item.addr_info);
		addressStr.value = item.addr_info;
	}
	const shuoming = ref('我是一个说明，我是一个说明，我是一个说明，我是一个说明');
	defineExpose({
		setAddress
	})
	const peiSong = ref(1);

	function radioChange(e) {
		peiSong.value = e.detail.value;
	}
	const mendian = ref({
		name: '张三',
		phone: '151151515',
		address: '地址地址地址地址XXXXXX地址地址地址地址XXXXXX地址地址地址地址XXXXXX',
		latitude: getApp().globalData.location.latitude,
		longitude: getApp().globalData.location.longitude
	});
	const latitude = ref(39.909)
	const longitude = ref(116.39742)
	onMounted(()=>{
		if(getApp().globalData.location.latitude){
			latitude.value = getApp().globalData.location.latitude
		}
		if(getApp().globalData.location.longitude){
			longitude.value = getApp().globalData.location.longitude
		}
	})
	function positionChange(e){
		console.log("e", e)
	}
	
</script>

<style>
	@import "../application/form.scss";
</style>